<template>
	<view class="ghPhone">
		<text class="headPhone">当前绑定手机： {{userInfo.userName}}</text>
		<view class="getCode">
			<input type="text" placeholder="请输入验证码" v-model="usercodePhone" value="" />
			<button class="codeButn" type="primary" @tap="numberst" :disabled="countdown < 60 && countdown >= 1">
			{{countdown < 60 && countdown >= 1?`${countdown}秒重获`:'获取验证码'}}</button>
		</view>
			
		<view class="sendout">
			<button @click="ghNext()" type="default">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				userInfo: '',
				countdown:60,
				usercodePhone: '',
				rules: {
					usercodePhone: {
						rule: /^[0-9]{4}$/,
						msg: "请输入4位数字验证码"
					}
				}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods: {
			validate(key){
			  let bool = true;
			  if(!this.rules[key].rule.test(this[key])){
				  //提示信息
				  uni.showToast({
					  title:this.rules[key].msg,
					  duration: 2000,
					  icon: "none",
				  })
				  //取反
				  bool=false;
				  return false;
			  }
			  return bool;
			},
			numberst(e) {
				this.countDown();
			},
			countDown(){
				let self = this;
				self.countdown = 60;
				self.countdown -= 1;
				uni.showLoading({
					title: '正在获取验证码'
				})
				uni.request({
					url: this.baseurl+'/index.php/api/Login/smsSend',
					method:'post',
					header:{
						'token': this.userInfo.token
					},
					data:{
						mobile: this.userInfo.mobile,
					},
					success: (res) => {
						console.log(res)
						if(res.data.code == '1') {
							uni.hideLoading();
							uni.showToast({
								  title: res.data.msg,
								  duration: 2000,
								  icon: "none",
							})
						} else {
							uni.hideLoading();
							uni.showToast({
								  title: '验证码获取失败',
								  duration: 2000,
								  icon: "none",
							})
						}
					}
				})
				if(self.clear){
					clearInterval(self.clear)
				}
				self.clear = null;
				self.clear = setInterval(_ => {
					if(self.countdown > 0){
						self.countdown -= 1;
					}else{
						clearInterval(self.clear)
					}
				},1000)
			},
			ghNext() {
				if(!this.validate('usercodePhone')) return;
				uni.showLoading({
				    title: '加载中'  
				});
				uni.request({
					url: this.baseurl+'/index.php/api/Login/login',
					method:'post',
					data:{
						mobile: this.userInfo.mobile,
						code: this.usercodePhone
					},
					success: (res) => {
						if(res.data.code == '1') {
							uni.hideLoading();
							uni.navigateTo({
								url: './confirmPhone'
							})
						} else {
							uni.showToast({
								  title: res.data.msg,
								  duration: 2000,
								  icon: "none",
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ghPhone {
		padding: 178rpx 72rpx 0 72rpx;
		.headPhone {
			display: block;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 44rpx;
			padding-bottom: 92rpx;
		}
		.getCode {
			display: flex;
			padding: 41rpx 0 22rpx 0;
			border-bottom: 2rpx solid #979797;
			/deep/ uni-input {
				height: 90rpx !important;
			}
			.codeButn {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				background-color: #007aff !important;
			}
		}
		.sendout {
			padding: 60rpx 0;
			button {
				height: 90rpx;
				line-height: 90rpx;
				color: #FFFFFF;
				background-color: rgb(242, 95, 95);
			}
		}
	}
	/deep/ .u-demo-block__content {
		padding-bottom: 15rpx;
		border-bottom: 2rpx solid #979797;
	}
	/deep/ .u-input__content__subfix-icon .u-button {
		height: 70rpx !important;
	}
	/deep/ .u-border {
		border: 0 !important;
	}
</style>
